<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="company-edit-wrap right-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/changeAccount' }">我的账户</el-breadcrumb-item>
              <el-breadcrumb-item>修改密码</el-breadcrumb-item>
            </el-breadcrumb>
            
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="change-wrap">
                     <el-form :model="information" :rules="rules" ref="information" label-width="200px">
                        <el-form-item prop="oldPwd">
                            <div class="content-list">
                                <div class="name">原密码：</div>
                                <el-input
                                v-model="information.oldPwd" type="password"
                                clearable>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item prop="newPwd">
                            <div class="content-list">
                                <div class="name">新密码：</div>
                                <el-input
                                v-model="information.newPwd" type="password"
                                clearable>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item prop="confirmPwd">
                            <div class="content-list">
                                <div class="name">确认密码：</div>
                                <el-input
                                v-model="information.confirmPwd" type="password"
                                clearable>
                                </el-input>
                            </div>
                        </el-form-item>
                     </el-form>
                     <div @click="login('information')" class="btn">确认修改</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  name: 'menulist',
  data(){
    return{
        information:{
            oldPwd:'',
            newPwd:'',
            confirmPwd:'',
        },
        rules: {
            oldPwd:[
                {required: true, message: '请输入原密码', trigger: 'change'  }
            ],
            newPwd:[
                {required: true, message: '请输入新密码', trigger: 'change'  }
            ],
            confirmPwd:[
                {required: true, message: '请输入确认密码', trigger: 'change'  }
            ],
        }
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  created(){
  
  },
  mounted(){

  },    
  watch: {  

  },

  methods:{
      login(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = CONSTANT.URL.ADMIN.CHANGE;
                    let data = this.information,
                    dataForm = { }
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                            this.$router.replace('/login')
                        }else{
                             this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
            
        },
  }
}
</script>

<style  lang="scss">

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.uploadShow  .el-upload{display: none;}
.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.company-edit-wrap{
  padding-top: 29px;
  .el-input__inner{
      padding-left: 13px;
  }
  .change-wrap{
    padding: 11px 60px 33px 29px;
    background-color: #fff;
    margin-top: 20px;
    .el-form-item{
        margin-bottom: 10px;
    }
    .el-form-item__content{
        margin-left: 0!important;
        
        .el-form-item__error{
            top: 80%;
            left: 98px;
        }
        .content-list{
            font-size: 18px;
            .name{
                display: inline-block;
                width: 90px;
                text-align: right;
            }
            .el-input{
                display: inline-block;
                width: 400px;
                height: 54px;
            }
        }
    }
    .btn{
        width: 400px;
        margin-left: 95px;
        margin-bottom: 20px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        font-size: 18px;    font-size: 18px;
        color: #fff;
        background-color: #ED7018;
        cursor: pointer;
        &:hover{
            background-color: #ED9000;
            transition:all .2s linear;
        }
    }
    .el-input__inner{
        border:1px solid #e1e1e1;
    }
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        height: 56px;
        line-height: 56px;
        border-bottom: 1px solid #D1D1D1;
        color: #666;
        font-size: 16px;
        span{
            color: #111;
            // font-weight: bold;
        }
      }
      .el-form-item{
          margin-bottom: 0;
          .el-form-item__content{
              line-height: inherit;
          }
      }
      .btn-submit{
            margin: 50px 0 0 30%;
            width: 200px;
            height: 40px;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            background-color: #ED7018;
            font-size: 24px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            }
        }
      .info-edit{
          padding-top: 31px;
          .edit-title{
              position: relative;
              font-size: 16px;
              color: #333;
            //   font-weight: bold;
              padding-left: 16px;
              margin-bottom: 28px;
              .btn{
                    position: absolute;
                    right: 30px;
                    top: 0px;
                    width: 73px;
                    height: 40px;
                    margin-left: 41px;
                    background-color: #ED7018;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 40px;
                    cursor: pointer;
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    } 
                }
            //   &:after{
            //       content: '';
            //       position: absolute;
            //       left: 0;
            //       top: 2px;
            //       width: 3px;
            //       height: 17px;
            //       background-color: #ED7018;
            //   }
          }
          .name-value{
            height: 40px;
            line-height: 40px;
          }
          .el-form-item__error{
            top: 64%;
            left: 11%;
          }
          .lince-image{
            .el-form-item__error{
                top: 93%;
            }
          }
          .edit-list{
              overflow: hidden;
              margin-bottom: 24px;
              .name{
                  float: left;
                  width: 10%;
                  text-align: right;
                  font-size: 14px;
                  color: #666;
                  margin-right: 15px;
                  height: 40px;
                  line-height: 40px;
                  min-width: 120px;
              }
              .delete-input{
                  font-size: 20px;
                  cursor: pointer;
                  color: #ED7018;
                 &:hover{
                    color: #ED9000;
                    transition:all .2s linear
                } 
              }
              &.line{
                .el-select{
                  margin-right: 10px;
                  width: 185px;
                  margin-right: 10px;
                }
              }
              &.image{
                 .edit-value{
                     float: none;
                     .add-image{
                         margin-left: 120px;
                         margin-top: 50px;
                     }
                 } 
              }
              &.address{
                .el-select{
                  margin-right: 16px;
                  width: 115px;
                }
              }
              &.chanel{
                 .el-select{
                  width: 384px;
                } 
              }
              &.register{
                .el-select{
                  margin-right: 10px;
                  width: 87px;
                }
                .address-input{
                    width: 422px;
                }
              }
              .edit-img{
                    
                    img{
                        width: 306px;
                        height: 227px;
                        border: 0;
                    }
                }
              &.introduce{
                  margin-bottom: 0;
                  .title-item{
                      overflow: hidden;
                      font-size: 14px;
                      color: #666;
                      height: 40px;
                      line-height: 40px;
                      .title-list{
                          float: left;
                          width: 87px;
                          margin-right: 10px;
                      }
                  }
                .el-input{
                    margin-right: 10px;
                    width: 87px;
                }
                .address-input{
                    display: inline-block;
                }
                .address-input{
                    width: 422px;
                   
                }
              }
              .edit-value{
                  position: relative;
                  float: left;
                  font-size: 14px;
                  color: #333;
                  .el-icon-plus{
                    width: 306px;
                    height: 227px;
                    background: url(../../../images/photo.png);
                    background-size: 100%;
                    &:before{
                        content: ''
                    }
                  }
                  .btn-add{
                        // position: absolute;
                        // right: -100px;
                        display: inline-block;
                        width: 73px;
                        height: 40px;
                        bottom: 25px;
                        // margin-left: 41px;
                        // margin-top: 30px;
                        background-color: #ED7018;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear
                        } 
                    }
                  .el-upload--picture-card{
                    width: 306px;
                    height: 227px;
                    border: 0;
                  }
                  .el-upload-list__item{
                      width: 306px;
                    height: 227px;
                  }
                 
                  &.text{
                    height: 40px;
                    line-height: 40px;
                  }
                  &.input{
                       width: 384px;
                        .el-date-editor{
                            width: 384px;
                            input{
                                padding-left: 30px;
                            }
                         }
                  }
                  .add-image{
                      width: 306px;
                      height: 227px;
                  }
              }
          }
      }
    }
  }
}

a{
  text-decoration: none;
}
</style>